<template lang="pug">
  .page-container 
    //头部 查询 新增
    .header
      el-input.name( v-model="tenant_name" clearable placeholder="租户名称" size="small")
      el-button.find(  type="primary" size="mini" icon="el-icon-search") 查询
      el-button.add( type="success" size="mini" icon="el-icon-plus" @click="addNewTenant") 新增

    //表格
    .mid
      el-table(
        :data="list"
        stripe size="mini" 
        style="width:100%" 
        v-loading="loading" 
        element-loading-text="$t('action.loading')")

        el-table-column(prop="id" header-align="center" align="center" width="80" label="编号")

        el-table-column(prop="name" header-align="center" align="center"  label="租户名称")
          template(slot-scope="scope")
            span {{scope.row.name}}

        el-table-column(prop="domain" header-align="center" align="center"  label="域名")
          template(slot-scope="scope")
            span {{scope.row.domain}}

        el-table-column(prop="status" header-align="center" align="center"  label="状态")
          template(slot-scope="scope")
            el-tag( type="danger" size="mini" v-if="scope.row.status == 0") 禁用
            el-tag( size="mini" v-else) 正常

        el-table-column(prop="create_time" header-align="center" align="center"  label="创建时间")
          template(slot-scope="scope")
            span {{scope.row.create_time}}
        
        //表格操作
        el-table-column(
          fixed="right"
          label="操作"
          width="300"
          align="center"
        )
          
          template(slot-scope="scope")
            el-button(type="success" size="small" @click="chooseAdmin") 选择管理员
            el-button(type="primary" size="small" @click="editDialog") 编辑
            el-button(type="danger" size="small" @click="deleteObj") 删除


    //选择管理员操作
    el-dialog( title="选择管理员" :visible.sync="adminChoose" width="30%")
      el-select(v-model="value4" clearable placeholder="请选择")
        el-option(
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        )
          
      div(slot="footer" class="dialog-footer")
        el-button(@click="adminChoose = false" size="mini") 取消
        el-button(type="primary" @click="adminChoose = false" size="mini") 确定


    //新增 或者 编辑 表单操作
    el-dialog(:title="dialogName + '租户'" :visible.sync="dialogFormVisible" width="30%")
      el-form(:model="form" ref="tenantForm")
        el-form-item(label="活动名称" prop="name") 
          el-input(v-model="form.name" clearable size="small" autocomplete="off") 
        el-form-item(label="域名" prop="domain") 
          el-input(v-model="form.domain" clearable size="small" autocomplete="off") 

      div(slot="footer" class="dialog-footer")
        el-button(@click="resetForm('tenantForm')" size="mini") 重置
        el-button(@click="dialogFormVisible = false" size="mini") 取消
        el-button(type="primary" @click="dialogFormVisible = false" size="mini") 确定
    
    //分页
    .pagation
      el-pagination(
        background
        layout="prev, pager, next" 
        @current-change="refreshPageRequest" 
        :current-page="pageRequest.pageNum" 
        :page-size="pageRequest.pageSize" 
        :total="total" style="float:right;")
    
</template>

<script>
//mixin: 组件公用方法 （ 此组件使用了公用的重置表单 ）
import { mixin } from "@/mixin/mixin";
export default {
  mixins: [mixin],
  name: "Tenant",
  data() {
    return {
      total: 100,
      tenant_name: "", //查询 租户名称 字段
      loading: false, //加载
      form: {
        //表单 （添加 或 编辑）
        name: "",
        domain: ""
      },
      list: [
        {
          id: 0,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        },
        {
          id: 1,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        },
        {
          id: 2,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        },
        {
          id: 3,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        },
        {
          id: 4,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        },
        {
          id: 5,
          name: "cc",
          domain: "www.baidu.com",
          status: 0,
          create_time: "9012-01-01"
        }
      ],
      dialogFormVisible: false, //弹出框是否显示
      dialogName: "", //弹出框名称
      adminChoose: false, //选择管理员的弹出框是否显示
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value4: ""
    };
  },
  mounted() {},
  methods: {
    //删除
    deleteObj() {
      this.$confirm("此操作将永久删除该租户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(()=>console.log('取消操作'));
    },
    //选择管理员
    chooseAdmin() {
      this.adminChoose = true;
    },
    //分页变化
    refreshPageRequest() {
      console.log("点击了当前页");
    },
    addNewTenant() {
      this.dialogFormVisible = true;
      //dom加入了dom树之后再对数据进行操作
      this.$nextTick(() => {
        this.dialogName = "新增";
        this.form.domain = window.location.host;
        this.form.name = "ss";
      });
    },
    //编辑
    editDialog() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.dialogName = "编辑";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 15px;
}
.name {
  width: 200px;
  margin-right: 10px;
}
.mid {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}
.pagation {
  width: 100%;
  padding-top: 10px;
  display: flex;
}
</style>
